<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <button id="increment">+1</button>
  <span id='box'>0</span>
  <button id="decrement">-1</button>
  <script src="index.js"></script>
  <script src="middlewares/logger.js"></script>
  <script src="middlewares/thunk.js"></script>
  <script>
    //enhancer的返回值是经过强化的store对象
    function enhancer(createStore){
      return function (reducer,preloadedState){
        const store = createStore(reducer,preloadedState)
        //获取dispatch 并对其进行重写 然后在新的store里面return出去
        const dispatch = store.dispatch
        function _dispatch(action){
          //如果action是个包含异步操作的函数（因为只有函数才可以执行异步操作）
          if (typeof action === 'function') {
            //执行异步action并返回 (action中必然会执行dispatch操作，所以要将dispatch作为形参传入)
            return action(dispatch)
          }
          //action不是函数 那么还是按照原来的方式执行
          dispatch(action)
        }
        
        return {...store, dispatch:_dispatch}
      }
    }

    function counterReducer (state,action) {
      switch (action.type) {
        case 'increment':
          return state + 1
        case 'decrement':
          return state - 1
        default:
          return state
      }
    }
    //rootReducer需要返回一个reducer
    const rootReducer = combineReducers({counter:counterReducer})
    //使用了combineReducers后 state是所有reducers的集合，因此state变为了对象
    //const store = createStore(rootReducer,{counter:0},applyMiddleware(logger,thunk))
    const store = createStore(rootReducer,{counter:0},applyMiddleware(thunk,logger))

    function increment(){
      return {type:"increment"}
    }

    function decrement(){
      return {type:"decrement"}
    }
    //bindActionCreators()返回类型 对象
    //参数一：返回type：string的对象的函数组成的对象
    const actions = bindActionCreators({increment,decrement},store.dispatch)

    const box = document.getElementById('box')
    
    //subscribe的参数必须是一个function（订阅者操作函数）
    store.subscribe(function () {
      box.innerHTML = store.getState().counter
    })
    document.getElementById('increment').onclick =
    function () {
      //store.dispatch({type:'increment'})
      //console.log(actions)
      actions.increment()
      //actions.test()
    }

    document.getElementById('decrement').onclick =
    function () {
      //store.dispatch({type:'decrement'})
      actions.decrement()
      
    }
  </script>
</body>
</html>